<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-row>
      <el-col :span="12">
        <p>开发</p>
        <img :src="base64ImageDev" v-if="base64ImageDev" />
      </el-col>
      <el-col :span="12">
        <p>生产</p>
        <img :src="base64ImagePred" v-if="base64ImagePred" />
      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "HomeworkQrCode",
    data(){
      return {
        // base64的二维码图片- 开发
        base64ImageDev: null,
        // base64的二维码图片- 生产
        base64ImagePred: null,
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          close: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
      }
    },
    methods: {
      /**
       * 打开页面之前
       */
      openLargeScreenQrCodeBefore(){
        this.getLargeScreenQrCode()
        this.tableConfig.show = true
      },
      /**
       * 获取大屏二维码
       */
      getLargeScreenQrCode(){
        http.post("/homework/getLargeScreenQrCode", {
          dev: 'dev',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64ImageDev = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })

        // 生产的
        http.post("/homework/getLargeScreenQrCode", {
          dev: 'prod',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64ImagePred = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },

    },
    mounted(){
    }

  }
</script>

<style scoped>

</style>
